<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>

<style>
@font-face {
    --invalid-var: 1;
}
@keyframes foo {
    --invalid-var: 3;
    0% { --valid-var: 4; }
    100% { left: 10px; }
}
</style>

<script>
test(() => assert_equals(document.styleSheets[0].cssRules[0].cssText, "@font-face { }"),
        "Custom properties are not allowed in @font-face rules");
test(() => assert_equals(document.styleSheets[0].cssRules[1].cssText,
`@keyframes foo {
  0% { --valid-var: 4; }
  100% { left: 10px; }
}`), "Custom properties are not allowed in the outer scope of @keyframes rules");
</script>
